<template>
  <div class="app-container">
		<div class="look">
			<el-divider content-position="left" v-if="tempData.contents || tempData.rpersons || tempData.normalTime || tempData.imgurls">履职问题：</el-divider>
			<div class="change" v-if="tempData.contents || tempData.rpersons || tempData.normalTime || tempData.imgurls">
				<p>
					<span>履职问题</span>
					<el-input v-model="tempData.contents" disabled type="text" class="userselect" placeholder="履职结果"/>
				</p>
				<p>
					<span>履职人员</span>
					<el-input v-model="tempData.rpersons" disabled type="text" class="userselect" placeholder="履职人员" />
				</p>
				<p>
					<span>履职时间</span>
					<el-input v-model="tempData.normalTime" disabled type="text" class="userselect" placeholder="履职时间" />
				</p>
				<p>
					<span>履职图片</span>
					<el-upload
						class="avatar-uploader"
						action
						:http-request="designUpAvatar"
						:show-file-list="false"
						disabled
					>
						<img v-if="tempData.imgurls" :src="tempData.imgurls" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</p>
			</div>
			<el-divider content-position="left">履职结果：</el-divider>
			<div class="change">
				<p>
					<span>履职内容</span>
					<el-input v-model="tempData.resultContent" disabled type="text" class="userselect" placeholder="履职内容"/>
				</p>
				<p>
					<span>履职人员</span>
					<el-input v-model="tempData.resultPerson" disabled type="text" class="userselect" placeholder="履职人员" />
				</p>
				<p>
					<span>履职时间</span>
					<el-input v-model="tempData.resultTimes" disabled type="text" class="userselect" placeholder="履职时间" />
				</p>
				<p>
					<span>履职图片</span>
					<el-upload
						class="avatar-uploader"
						action
						:http-request="designUpAvatar"
						:show-file-list="false"
						disabled
					>
						<img v-if="tempData.resultUrl" :src="tempData.resultUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</p>
			</div>
			
			<div class="submits">
				<div class="save" @click="back" v-if="islook">返回</div>
			</div>
		</div>
  </div>
</template>

<script>
	let fatherId = null
	import { selectProblemResult } from '@/api/oneclassify'
	export default {
		data(){
			return{
				tempData: {},
				writeOradd: 0,   //1修改还是0增加
				islook: false
			}
		},
		mounted() {
			const temp = JSON.parse(this.$route.params.options)
			console.log(temp)
			this.getdetail(temp.rid)
		},
		methods:{
			getdetail(id){
				selectProblemResult({
					rid: id
				}).then(res => {
					console.log('详情',res)
					this.tempData = res.data[0]
				})
			},
			save(){
				if(this.writeOradd == 0){
					this.tempData.parentId = fatherId
					this.tempData.status = 0
					addProblemResult(this.tempData).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
						})
						this.$router.go(-1)
					})
				}else{
					delete this.tempData.insertTime
					delete this.tempData.updateTime
					updateProblemResult(this.tempData).then(res => {
						console.log(res)
						this.$message({
							message: res.message,
							type: 'success'
						})
						this.$router.go(-1)
					})
				}
			},
			nosave(){
				this.$router.go(-1)
			},
			back(){
				this.$router.go(-1)
			},
			// 上传头像
			designUpAvatar(item){
				console.log(this.fileNum)
				var formData = new FormData()
				formData.append("file", item.file)
				uploadFile(formData).then(res => {
				  console.log(res)
					this.$message({
					  showClose: true,
					  message: '添加成功',
					  type: "success"
					})
					// this.imageUrl = res
					this.tempData.resultUrl = res
					console.log(this.tempData.resultUrl)
					this.$forceUpdate()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
/deep/.el-divider {
	background-color: #18A05E;
	position: relative;
}
/deep/.el-divider--horizontal {
    height: 3px;
}
/deep/.el-divider__text {
	color: #18A05E;
}
.look{
	background: #fff;
	padding: 20px;
	border-radius: 10px;
}
.avatar-uploader{
  position: relative;
}
.avatar-uploader .el-upload {
  border: 1px dashed #999 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatars{
	width: 45px;
	height: 45px;
  margin: 0 auto;
  border: 1px solid #ccc
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
	border: 1px dashed #CCCCCC;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
	.disable{
		pointer-events: none;
		background: #808080 !important;
	}
	.change {
	  display: flex;
	  flex-wrap: wrap;
	  background: #fff;
	  border-radius: 8px;
	  padding: 20px 0;
	  > p {
	    width: 33%;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    color: #333;
	    /deep/.el-input__inner {
	      // width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 100px;
	      text-align: right;
	      padding-right: 15px;
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
			> textarea{
				width: inherit;
				flex: 1;
				height: 60px;
				border-radius: 3px;
				border: 1px solid rgba(0, 0, 0, 0.1);
				padding: 10px;
			}
	  }
	}
	.avatar-uploader .el-upload {
	  border: 1px dashed #999 !important;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  width: 100%;
	}
	.avatar-uploader .el-upload:hover {
	  border-color: #409eff;
	}
	
	.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 100px;
	  height: 100px;
	  line-height: 100px;
	  text-align: center;
	}
	.avatar {
	  width: 100px;
	  height: 100px;
	  display: block;
	}
	.submits {
	  display: flex;
		background: #fff;
	  padding: 20px 20px;
		border-radius: 8px;
		margin-top: 20px;
		// border-top: 1px solid #ccc;
	  justify-content: flex-end;
	  align-items: center;
	  > div {
	    width: 80px;
	    height: 32px;
	    text-align: center;
	    line-height: 32px;
	    color: #fff;
	    font-size: 14px;
	    border-radius: 4px;
	    margin-left: 30px;
	    cursor: pointer;
	  }
	  .save {
	    background: #18a05e;
	  }
	  .nosave {
	    background: #999;
	  }
	}
</style>